<template>
  <div>
      <!-- banner -->
    <WidgetsStatsA />
    <!-- sun -->
    <CRow>       
      <CCol :md="12">
        <CCard class="card mb-4">
          <CCardFooter>
            <CRow :xs="{ cols: 1 }" :md="{ cols: 5 }" class="text-center">
              <!-- 1 -->
              <CCol class="mb-sm-2 mb-0">
                <strong>$0.0000000825</strong>
                <div class="text-medium-emphasis">Price</div>
              </CCol>
              <!-- 2 -->
              <CCol class="mb-sm-2 mb-0 d-md-down-none">
                <strong>413,548+</strong>
                <div class="text-medium-emphasis">Holders</div>
              </CCol>
              <!-- 3 -->
              <CCol class="mb-sm-2 mb-0">
                <strong>62.46%</strong>
                <div class="text-medium-emphasis">Burned</div>
                <CProgress
                  class="mt-2"
                  color="blue"
                  thin
                  :precision="1"
                  :value="62.46"
                />
              </CCol>
              <!-- 4 -->
              <CCol class="mb-sm-2 mb-0">
                <strong>375,311 B</strong>
                <div class="text-medium-emphasis">Circuating</div>
              </CCol>
              <!-- 5 -->
              <CCol class="mb-sm-2 mb-0 d-md-down-none">
                <strong>$309,701,603</strong>
                <div class="text-medium-emphasis">Market Cap</div>
              </CCol>
            </CRow>
          </CCardFooter>
        </CCard>
      </CCol>
    </CRow>
    <!-- project backgroud -->
    <CRow class="project-backgroud">
         <div class="title">
            Project Backgroud
            <h1>JGame`s Metaverse</h1>
        </div>
        <!-- 1 -->
        <CCol :sm="6" :lg="4" style="margin-bottom: 2rem;">
            <CCard class="jgme-card mb-4">
                <div class="img-logo">
                    <div class="img-logo-bg">
                        <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        fill="currentColor"
                        class="bi bi-projector-fill"
                        viewBox="0 0 16 16"
                    >
                        <path
                        d="M2 4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1h6a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2Zm.5 2h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1ZM14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-12 1a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z"
                        />
                        </svg>
                    </div>
              </div>
              <div class="text">
                <strong>JGames</strong>
                <div>JGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGames</div>
              </div>
              </CCard>
        </CCol>
        <!-- 2 -->
        <CCol :sm="6" :lg="4" style="margin-bottom: 2rem;">
            <CCard class="jgme-card mb-4">
                <div class="img-logo">
                    <div class="img-logo-bg">
                    <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    fill="currentColor"
                    class="bi bi-projector-fill"
                    viewBox="0 0 16 16"
                >
                    <path
                    d="M2 4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1h6a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2Zm.5 2h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1ZM14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-12 1a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z"
                    />
                </svg>
              </div>
              </div>
              <div class="text">
                <strong>JGames</strong>
                <div>JGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGames</div>
              </div>
              </CCard>
        </CCol>
        <!-- 3 -->
        <CCol :sm="6" :lg="4" style="margin-bottom: 2rem;">
            <CCard class="jgme-card mb-4">
                <div class="img-logo">
                    <div class="img-logo-bg">
                    <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    fill="currentColor"
                    class="bi bi-projector-fill"
                    viewBox="0 0 16 16"
                >
                    <path
                    d="M2 4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1h6a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2Zm.5 2h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1ZM14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-12 1a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z"
                    />
                </svg>
              </div>
              </div>
              <div class="text">
                <strong>JGames</strong>
                <div>JGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGamesJGames</div>
              </div>
            </CCard>
        </CCol>
    </CRow>
    <!-- JGame Token -->
    <CRow class="JGame-Token">
         <div class="title">
            <CButton class="info-btn" color="info" >
              {{ i18n.t('home.tokenBtn') }}
            </CButton>
            <h1>JGame Token</h1>
        </div>
        <CRow :sm="7" :lg="7" >
            <CCol :sm="10" :lg="8" style="text-align: end" >
                <div class='text'>margin-bottom ,margin-bottommargin-bottommargin-bottommargin-bottommargin-bottommargin-bottommargin-bottommargin-bottommargin-bottommargin-bottom</div>
                <CRow class='text-img-body'>
                    <!-- 1 -->
                    <CCol :sm="2" :lg="4" class='text-img-item'>
                        <img class="img" src="../assets/images/home/token1.png" alt="slide 3" />
                        <div class="text-img-item-text">
                            <strong>10%</strong>
                            <p>Gradually Destroy</p>
                        </div>
                    </CCol>
                    <!-- 2 -->
                    <CCol :sm="2" :lg="4" class='text-img-item'>
                        <img class="img" src="../assets/images/home/token2.png" alt="slide 3" />
                        <div class="text-img-item-text">
                            <strong>10%</strong>
                            <p>Gradually Destroy</p>
                        </div>
                    </CCol>
                    <!-- 3 -->
                    <CCol :sm="2" :lg="4" class='text-img-item'>
                        <img class="img" src="../assets/images/home/token3.png" alt="slide 3" />
                        <div class="text-img-item-text">
                            <strong>10%</strong>
                            <p>Gradually Destroy</p>
                        </div>
                    </CCol>
                </CRow>
            </CCol>
            <CCol :sm="3" :lg="3" style="text-align: end" >
                <img class="d-block w-100" src="../assets/images/home/about-jgame.png" alt="slide 3" />
            </CCol>
        </CRow>
    </CRow>
  </div>
</template>

<script>
import WidgetsStatsA from './widgets/WidgetsStatsTypeA.vue'
import { useI18n } from 'vue-i18n'

export default {
  name: 'Dashboard',
  components: {
    WidgetsStatsA,
  },
  setup() {
    const i18n = useI18n()
    return {
        i18n
    }
  },
}
</script>

<style scoped lang="scss">
@import "~@/styles/custom";
.card {
  color: cornflowerblue;
  .card-footer {
    background: none;
    strong {
      font-size: 1.3rem;
    }
  }
}

.project-backgroud {
  background-image: linear-gradient(to bottom, #cfdef773, #ffffff);
  text-align: center;
  padding: 5%;
  .title {
    color: #80aefd;
    padding: 2rem;
    margin-bottom: 2rem;
    h1 {
      color: #000;
    }
  }
  .jgme-card {
    margin-bottom: 5rem;
    -webkit-box-shadow: 0 3px 9px #cfdef7f1;
    box-shadow: 0 3px 9px #cfdef7f1;
    .img-logo {
      position: relative;
      background: #fff;
      top: -2.5rem;
      left: 38%;
      width: 5rem;
      height: 5rem;
      -webkit-box-shadow: 0 3px 9px #cfdef7f1;
      box-shadow: 0 3px 9px #cfdef7f1;
      border-radius: 180%;
      .img-logo-bg {
        width: 4rem;
        height: 4rem;
        margin: 0.5rem auto;
        padding: 3%;
        border-radius: 180%;
        background: #80aefd7c;
        svg {
          width: 3rem;
          height: 3.5rem;
          margin: auto;
        }
      }
    }
    .text {
      min-height: 16rem;
      margin-top: -1.5rem;
      padding: 0 2rem 2rem 2rem;
      color: #000;
      strong {
        font-size: 1.3rem;
      }
    }
  }
}

.JGame-Token {
  padding: 5%;
  .title {
    margin-bottom: 1rem;
    .info-btn {
      color: $info-btn-color;
      background-image: $info-btn;
      margin-bottom: 1rem;
    }
  }
  .text{
    min-height: 16rem;
  }
  .text-img-body {
      text-align: left;
    .text-img-item {
      display: flex;
      .img {
        width: 3.5rem;
        height: 3.5rem;
      }
      .text-img-item-text {
        margin-left: 1rem;
      }
    }
  }
}
</style>
